<template>
  <div class="user-edit">
    <!-- Modal -->
    <Modal
      :title="title"
      v-model="visible"
      width="620"
      :styles="{top: '20px','border-radius': '15px'}"
      :mask-closable="type == '0'"
      scrollable=true
      transfer
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <Form
          ref="form"
          :model="form"
          :rules="ruleValidate"
          label-position="top"
        >
          <Row :gutter="32">
          <Col span="24">
            <FormItem label="对应页面：" prop="dictDataId">
              <Select v-model="form.dictDataId" transfer placeholder="请选择">
                <Option v-for="item in dictDataIdList" :key="item.id" :value="item.id">{{item.title}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="规则文字说明：" prop="remark">
              <Input type="textarea" v-model="form.remark" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="启用状态：">
              <i-switch size="large" v-model="form.isSwitch">
                <span slot="open">启用</span>
                <span slot="close">禁用</span>
              </i-switch>
            </FormItem>
          </Col>
        </Row>
        </Form>
      </div>
       <div slot="footer">
        <Button type="primary" size="large" :loading="submitLoading" @click="submit">保存</Button>
        <Button size="large" @click="visible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getDictDataByType,
  scRuleGuideAdd,
} from "@/api/index";

export default {
  name: "rule-management-addEdit",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      // companyNature: {},
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        isSwitch: true
      },
      dictDataIdList: [],
      ruleValidate: {
        dictDataId: [
          { required: true, message: "请选择对应页面", trigger: "change" }
        ],
        remark: [
          { required: true, message: "请输入规则文字说明", trigger: "blur" }
        ],
      },
    };
  },
  methods: {
    init() {
      getDictDataByType('rule_page_type').then(res => {
        if(res.success) {
          this.dictDataIdList = res.result
        }
      })
    },
    handleSelectDepTree(v) {
      // this.form.departmentId = v;
    },
    changePass(v, grade, strength) {
      // this.form.passStrength = strength;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          if(this.form.isSwitch) {
            this.form.status = 0
          }else{
            this.form.status = -1
          }
          let apitype = ''
          if(this.type == "1") {
            apitype = 'update'
          }else{
            apitype = 'add'
          }
          scRuleGuideAdd(apitype, this.form).then(res => {
            this.$Message.success("操作成功")
            this.visible = false
              this.$emit("on-submit", true);
          })
        }
      })
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      this.$refs.form.resetFields()
      if (this.type == "1") {
        this.title = "修改规则须知";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
          // console.log(this.data,'aaaaaaaaaa')
          this.form = this.data
          this.form.isSwitch = this.data.status == '0'
      } else if (this.type == "2") {
        this.title = "添加规则须知";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
          this.form = {isSwitch: true}
      }
      this.visible = value;
    },
    
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
    
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>

